<template>
    <div v-bind="attrs"> SetupSuger </div>
    <div @click="onClickDiv">
        {{ count }} - {{ props.msg }}
    </div>
    <Temp />
</template>

<script lang="ts" setup>
import { onMounted, ref, useAttrs, useSlots } from 'vue'
import Temp from './temp.vue'
// 相对于普通script语法的区别
// 代码更简洁、能使用纯TS声明的props和emits、更新的运行时性能、更好的类型推断

// const props = defineProps({
//     msg: {
//         type: String,
//         validator: (val) => {
//             console.log('validator', val);
//             return true
//         }
//     }
// })
// const emit = defineEmits(['onSugerClick'])
// const props = defineProps<{
//     msg: string
// }>()
interface props {
    msg: string
}
const props = withDefaults(defineProps<props>(), {
    msg: '你好Vue3'
})
const emit = defineEmits<{
    (e: 'onSugerClick'): void
}>()

const attrs = useAttrs()
const slots = useSlots()
console.log('attrs', attrs);
console.log('slots', slots);
const count = ref(0)
const onClickDiv = () => {
    count.value += 10
}
// 可直接使用await语法，编译时setup函数会自动追加async
// const res = await fetchLogin('...')
onMounted(() => {
    setTimeout(() => {
        count.value = 1
        emit('onSugerClick')
    }, 1000);
})
</script>
